<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />

		<title>回课 详情</title>
		<!--
        	作者：offline
        	时间：2017-08-23
        	描述：回课的详情界面，有视屏播放和下面的乐谱，下面还有评论
        -->
		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">

		

		<style>
			.div-video {
				width: 100%;
				height: 280px;
				background-color: #000000;
				color: #FFFFFF;
			}
			.float-button {
				position: fixed; //关键	         
				width: 50px;
				top: 20px;
				left: 10px;
				z-index: 2;
			}
			
			.div1 {
				padding: 5px;
				background-color: #FFFFFF;
			}
			
			.div6 {
				margin-top: 2%;
				width: 100%;
				height: 50px;
				padding: 10px;
			}
			
			.div6 img {
				float: left;
				height: 35px;
			}
			
			.width {
				width: 100%;
			}
			
			.width-50px {
				width: 50px;
			}
			
			.span1 {
				color: #2cc7fd;
				font-size: larger;
			}
			
			.span2 {
				color: #a3a3a3;
				font-size: small;
			}
			
			.span3 {
				float: left;
				line-height: 35px;
			}
			
			.magin-120 {
				margin-top: 120%;
			}
			
			.width-30 {
				width: 30px;
			}
			
			.span3 {
				font-size: x-larger;
			}
			
			.margin-5px {
				margin-top: 5px;
			}
			
			.button1 {
				background-color: #00d5c5;
				float: right;
				color: #FFFFFF;
				width: 80px;
			}
			
			body {
				background-color: #F6F6F6;
			}
			
			.textalign {
				text-align: center;
			}
			
			/**
			 * 自定义 视频播放示例的样式
			 */
			/**
			 * 设置一个边框与固定宽度
			 */
			#videoContainer {
				
				width: 100%;
				min-height: 200px;
				text-align: center;
				background-color: #000000;
			}
			/**
			 * 控制视频本身
			 * 默认是 高度和宽度时1px,用来隐藏视频,用一张默认的图片替代视频
			 */
			#videoMedia {
				margin-top: 0px;
				width: 1px;
				height:1px;
			}
			/**
			 * 默认图片和videoContainer保持宽高一致
			 */
			#videoContainer img{
				width: 100px;
				max-width: 100%;
				margin-top: 50px;
			}
			#TypeSwitch{
				margin-top: 10px;
				border: 1px solid #3094D2;
				width: 360px;
				max-width: 100%;
			}
			.switchBtn{
				margin: 10px;
			}
			.choosed{
				border: 1px solid #B12D1E;
			}
		</style>
	</head>

	<body>

		<div class="mui-content">
			<div id="videoContainer">
				<!--
                	让ios支持内联播放,必须添加 webkit-playsinline 标签
                -->
				<video webkit-playsinline id="videoMedia" controls="controls" preload>
					<!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
					<!--
                    	这里用的是自己本地的视频,请换位自己本地的
                    -->
					<!--<source src="http://flv2.bn.netease.com/videolib3/1604/28/fVobI0704/SD/fVobI0704-mobile.mp4" type='video/mp4'>-->
					<!--<source id="videoSource" src="" type='video/mp4'></source>
						-->
						
						
					<!--<source src="../../video/Wildlife.webm" type='video/webm'>	-->
					<!--<source src="http://192.168.23.1:8088/Wildlife.mp4" type='video/mp4'>-->
					<!--<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>-->
					<!--<source src="../video/Wildlife.mp4" type='video/mp4'>
					<source src="../video/Wildlife.webm" type='video/webm'>-->
					<!--http://192.168.23.1:8088/Wildlife.mp4-->
					<p>浏览器不支持Html5 Video!</p>
				</video>
				<img id="videoMediaDefaultImg" src="../img/img_clickToPlay.png" />
			</div>
			
			
			<div class="flex h-center div1 v-center">
				<div class="flex-1">
					<img class="width" src="../img/head-01.png" />

				</div>
				<div class="flex-3">
					<div style="padding-left: 15px;">
						<span class="span1">王大珂</span>
						<span class="span2">3小时前</span>
					</div>
					<div class="margin-5px" style="padding-left: 15px;">
						<span class="span3">贝多芬的悲伤</span>
					</div>

				</div>
				<div class="flex-2">

					<div class="flex">
						<div class="flex-1">
							<img class="width-30" src="../img/icon-messages.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-collect.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-share.png" />
						</div>
					</div>
				</div>

			</div>

			<div class="div6">
				<img src="../img/icon-vertical.png" />
				<span class="span3">乐谱标注</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">打赏</button>
			</div>

			<div style="margin: 10px;background-color: #FFFFFF;">
				<img class="width" src="../img/musicscore-01.png" />
				<div class="textalign">

					<img class="width-50px" src="../img/label-character.png" />

					<img class="width-50px" src="../img/label-region.png" />

				</div>

			</div>
			<div style="margin: 10px;">
				<div class="flex v-center width" style="height: 30px;">
					<img class="width-30" src="../img/icon-star.png" />
					<span>钢琴家</span>
					<span class="yellow">  + 5</span>

				</div>
				<div class="flex v-center width" style="height: 30px;">

					<span class="blue">钢琴家 :</span>
					<span class="gray">还不错,继续努力哦!</span>

				</div>
			</div>

			<!--pdf乐谱放大后的界面-->
			<div id="idddd" class="fill-all dialog" style="visibility: hidden; position: fixed;padding: 10px;">
				<div style="width: 100%;height: 85%;background-color: #FFFFFF;">
					pdf

				</div>
				<div class="flex v-center width" style="height: 15%;background-color: #FFFFFF;">
					<div class="flex-1 textalign">
						<img class="width-50px" src="../img/label-character.png" />
					</div>
					<div class="flex-1 textalign">
						<img class="width-50px" src="../img/label-region.png" />
					</div>
					<div class="flex-1 textalign">
						<img class="width-50px" src="../img/label-character.png" />
					</div>
				</div>
			</div>
		</div>
		
		<div class="float-button">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left white-color"></a>

		</div>
		
		
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script>
			
			//document.getElementsByTagName("body")[0].setAttribute("style","overflow-y:hidden");
			document.getElementById("idddd").addEventListener('touchmove', function(event) {
				event.preventDefault();
			}, false);
		</script>

	</body>

</html>